import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
import { TreeNode } from '@iux/live';

@Component({
  selector: 'app-icons',
  templateUrl: './icons.component.html',
  styles: [
    `
      h2 {
        font-size: 16px;
        line-height: 24px;
      }

      .ui-tree-container {
        box-sizing: content-box;
        width: 360px;
        padding: 16px;
        border: 1px solid #d9d9d9;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconsComponent implements OnInit {
  contentIconData: TreeNode[];
  expansionIconData: TreeNode[];

  ngOnInit(): void {
    this.initData();
  }

  initData(): void {
    this.contentIconData = this.getContentIconData();
    this.expansionIconData = this.getExpandIconData();
  }

  getContentIconData(): TreeNode[] {
    return [
      {
        label: 'Documents',
        contentToggleIcon: 'icon-storage', // 自定义内容图标
        children: [
          {
            label: 'Expenses.xls',
            contentToggleIcon: 'icon-storage', // 自定义内容图标
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            contentToggleIcon: 'icon-storage', // 自定义内容图标
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word', // 默认内容图标
        children: [
          {
            label: 'Expenses.doc', // 默认内容图标
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            contentToggleIcon: '', // 不显示内容icon
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Pictures',
        contentToggleIcon: '', // 不显示内容icon
        children: [
          {
            label: 'logo.png',
            contentToggleIcon: 'icon-storage', // 自定义内容图标
            isLeaf: true,
          },
          {
            label: 'banner.pnd', // 默认内容图标
            isLeaf: true,
          },
        ],
      },
    ];
  }

  getExpandIconData(): TreeNode[] {
    return [
      {
        label: 'Documents',
        contentToggleIcon: {
          true: 'icon-storage',
          false: 'icon-data-center',
        },
        children: [
          {
            label: 'Expenses.rar',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
        ],
      },
      {
        label: 'Word', // 默认内容展开折叠图标
        children: [
          {
            label: 'Expenses.doc',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
          {
            label: 'Resume.doc',
            contentToggleIcon: 'icon-storage',
            isLeaf: true,
          },
        ],
      },
    ];
  }
}
